<template>
  //kaifu
	<view>
		<view class="main">
			<view class="top">
				<text class="top-text">团体入园凭证</text>
			</view>
			<view class="time">
				<text class="time-text">2024年5月30日 13:00-16:00</text>
			</view>
			<view class="yuyue">
				<text class="yuyue-text">预约信息1</text>
			</view>
			<image class="divider" src="../../static/divider.png" />
			<view>
				<uni-card class="info-card">
					<view class="msg">团体名称：团体名称11</view>
					<view class="msg">团体人数：56人</view>
				</uni-card>
			</view>
			<view class="yuyue">
			                <text class="yuyue-text">预约人信息</text>
			</view>
			<image class="divider" src="../../static/divider.png" />
			<view>
				<uni-card class="info-card">
					<view class="msg">姓名：预约人姓名</view>
					<view class="msg">证件类型：中国居民身份证</view>
					<view class="msg">证件号码：510000000000000000000</view>
					<view class="msg">手机号码：15884418478</view>
				</uni-card>
				<view class="huacao">
					<text class="huacao-text">园区花草，种植不易请爱护</text>

				</view>
			</view>
		</view>
		<view class="bottom">
			<text class="bottom-text1">离凭证消失剩余<text class="bottom-text2">3小时56分钟</text>。可发起新的预约</text>
		</view>
	</view>
</template>

<script setup>

</script>

<style scoped>
	.main {
		margin: 12px;
		width: 100%;
		height: 578px;
		background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5)), url("../../static/bg1.png");
		background-size: cover;
		border-radius: 12px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		position: relative; 
	}
	
	.icon {
		width: 24px; 
		height: 24px; 
		margin-left: 8px; 
		vertical-align: middle; 
	}

	.top {
		text-align: center;
		height: 85px;
		position: relative; 
	}

	.time {
		text-align: center;
		position: relative;
		top: -20px;
	}

	.bottom {
		text-align: center;
		margin-top: 55px;
		height: 55px;
	}

	.bottom-text1 {
		color: #5f5f5f;
		font-size: 12px;
		font-weight: 400;
		line-height: 0;
	}

	.bottom-text2 {
		color: #8dcb6d;
		font-size: 12px;
		font-weight: 400;
	}

	.divider {
	        width: 100%; 
	        height: 2px; 
	        margin: 10px 0; 
	        display: block; 
	        object-fit: cover; 
	    }

	.msg {
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 15px;
		color: #000000;
		margin-top: 12px;
		margin-bottom: 12px;
	}

	.yuyue {
		text-align: left;
		margin-left: 15px;
		margin-top: 40px;
	}

	.yuyue-text {
		font-family: PingFangSC-Medium;
		font-weight: bold;
		font-size: 15px;
		color: #000000;
	}

	.time-text {
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #5F5F5F;
	}

	.top-text {
		opacity: 0.9;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 20px;
		color: #000000;
		line-height: 85px;
	}

	.info-card {
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		padding: 16px;
		margin: 12px 0;
		background-color: rgba(255, 255, 255, 0.9);
	}
	
	.huacao {
		margin-top: 60px;
		text-align: center;
	}

	.huacao-text {
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #5F5F5F;
		letter-spacing: 0;
	}
</style>
